1.3 CSS Basics: Adding Style to Mario's World

Welcome back, young adventurers! In our previous lesson, we built the basic structure of our Super Mario Bros. game using HTML. Now, it's time to add some color and style to Mario's world. We're going to dive into the magical realm of CSS (Cascading Style Sheets) and transform our plain HTML into a vibrant and exciting game scene!

What is CSS and Why Do We Need It?

Imagine you've built a house using only wooden beams and nails. It's sturdy, but it doesn't look very pretty, does it? That's where CSS comes in. CSS is like the paint, wallpaper, and decorations that make your house look beautiful and unique.

In web development, CSS is used to style and layout web pages. It tells the browser how to display HTML elements. With CSS, we can change colors, fonts, spacing, and even create animations!

How to Use CSS

There are three ways to use CSS in your HTML document:

Inline CSS (directly in HTML elements)
Internal CSS (using a <style> tag in the <head> section)
External CSS (linking to a separate CSS file)

In our Super Mario Bros. game, we're using the internal CSS method. Let's take a closer look at our CSS code and learn some basic concepts.

CSS Syntax

CSS uses a simple syntax:

selector {
  property: value;
}

The selector targets HTML elements to style.
The property is what you want to change (like color, size, or position).
The value is what you're setting the property to.

Let's look at some examples from our game:

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Press Start 2P", cursive;
}

Here, we're targeting both the body and html elements. We're setting their margin and padding to 0, height to 100% of the viewport, and changing the font family to a cool pixelated font that looks just like the original Super Mario Bros. game!

Adding Custom Fonts

Speaking of fonts, did you notice this line in our HTML <head> section?

<link
  href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
  rel="stylesheet"
/>

This is how we import a custom font from Google Fonts. The "Press Start 2P" font gives our game that authentic retro look!

Styling the Game Container

Let's look at how we style our main game container:

.game-container {
  width: 100%;
  height: 100%;
  background-color: #5c94fc;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
}

We set the width and height to 100% so it fills the entire screen.
The background-color is set to a light blue (#5c94fc) to represent the sky.
We use position: relative so we can position other elements inside it absolutely.
overflow: hidden ensures nothing spills outside our game container.
The box-shadow property adds a subtle dark shadow around the edges, giving depth to our scene.

Positioning Elements

CSS allows us to position elements precisely where we want them. Let's look at how we position Mario:

.mario {
  position: absolute;
  z-index: 1;
  bottom: 150px;
  left: 50px;
  width: 35px;
  height: 40px;
  background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario.png");
  background-size: cover;
}

position: absolute allows us to position Mario exactly where we want him relative to the game container.
z-index: 1 ensures Mario appears in front of other elements.
bottom: 150px and left: 50px position Mario 150 pixels from the bottom and 50 pixels from the left of the game container.
We set Mario's width and height.
We use a background-image to display Mario's sprite and background-size: cover to make sure it fits perfectly.

Creating the Ground

To create the ground Mario walks on, we use this CSS:

.ground {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 150px;
  background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/ground.jpg");
  background-repeat: repeat-x;
  background-size: contain;
}

The background-repeat: repeat-x property makes the ground texture repeat horizontally, creating an endless floor for Mario to run on.

Adding Decorative Elements

To make our game world more interesting, we've added clouds, hills, and question blocks. Let's look at the cloud CSS:

.cloud {
  position: absolute;
  top: 200px;
  right: 200px;
  width: 140px;
  height: 100px;
  background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/cloud.png");
  background-size: contain;
}

We position the cloud absolutely, set its size, and use a background image to display it.

Creating the Game HUD (Heads-Up Display)

The HUD shows the player's score, coins, world, time, and lives. We style it like this:

.stats {
  display: flex;
  justify-content: space-around;
  padding: 8px;
  color: white;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

We use display: flex and justify-content: space-around to evenly space out the HUD elements across the top of the screen.

Complete Example

Now, let's put it all together! Here's our complete Super Mario Bros. game scene with CSS styling:

http://localhost:3000

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Super Mario Bros.</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
      rel="stylesheet"
    />
    <style>
      body,
      html {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: "Press Start 2P", cursive;
      }
      .game-container {
        width: 100%;
        height: 100%;
        background-color: #5c94fc;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
      }
      .stats {
        display: flex;
        justify-content: space-around;
        padding: 8px;
        color: white;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
      }
      .title {
        position: absolute;
        top: 200px;
        left: 100px;
        background-color: #e86a17;
        color: #ffd8d8;
        padding: 16px;
        font-size: 52px;
        font-weight: bold;
        text-align: left;
        line-height: 70px;
        border-radius: 8px;
        text-shadow: 8px 8px #000;
        box-shadow: 4px 4px #000;
      }
      .copyright {
        position: absolute;
        top: 382px;
        left: 426px;
        color: #ffd8d8;
        font-size: 20px;
      }
      .cloud {
        position: absolute;
        top: 200px;
        right: 200px;
        width: 140px;
        height: 100px;
        background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/cloud.png");
        background-size: contain;
      }
      .block {
        position: absolute;
        width: 40px;
        height: 40px;
        border: 1px solid #000;
        text-align: center;
        line-height: 40px;
      }
      .block1,
      .block3,
      .block5 {
        background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/block.png");
        background-size: cover;
      }
      .block2,
      .block4 {
        background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/question_block.gif");
        background-size: cover;
      }
      .block1 {
        bottom: 300px;
        right: 320px;
      }
      .block2 {
        bottom: 300px;
        right: 280px;
      }
      .block3 {
        bottom: 300px;
        right: 240px;
      }
      .block4 {
        bottom: 300px;
        right: 200px;
      }
      .block5 {
        bottom: 300px;
        right: 160px;
      }
      .mario {
        position: absolute;
        z-index: 1;
        bottom: 150px;
        left: 50px;
        width: 35px;
        height: 40px;
        background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/mario.png");
        background-size: cover;
      }
      .goomba {
        position: absolute;
        z-index: 1;
        bottom: 150px;
        left: 500px;
        width: 40px;
        height: 40px;
        background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/goomba.gif");
        background-size: cover;
      }
      .hill {
        position: absolute;
        bottom: 150px;
        width: 300px;
        height: 150px;
        background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/hill.png");
        background-size: cover;
        border-radius: 50% 50% 0 0;
      }
      .hill1 {
        left: 0px;
      }
      .hill2 {
        right: 200px;
        width: 200px;
        height: 100px;
      }
      .ground {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 150px;
        background-image: url("https://www.weblab.fun/img/tutorials_frontend_development/mario_game/ground.jpg");
        background-repeat: repeat-x;
        background-size: contain;
      }
    </style>
  </head>
  <body>
    <div class="game-container">
      <div class="stats">
        <span>SCORE<br />0</span>
        <span>COINS<br />0</span>
        <span>WORLD<br />1-1</span>
        <span>TIME<br />378</span>
        <span>LIVES<br />3</span>
      </div>
      <div class="title">SUPER<br />MARIO BROS.</div>
      <div class="copyright">©1985 NINTENDO</div>
      <div class="cloud"></div>
      <div class="block block1"></div>
      <div class="block block2"></div>
      <div class="block block3"></div>
      <div class="block block4"></div>
      <div class="block block5"></div>
      <div class="mario"></div>
      <div class="goomba"></div>
      <div class="hill hill1"></div>
      <div class="hill hill2"></div>
      <div class="ground"></div>
    </div>
    <script>
      const mario = document.querySelector(".mario");
      let position = 50;

      document.addEventListener("keydown", (e) => {
        if (e.key === "ArrowRight") {
          position += 10;
          mario.style.left = `${position}px`;
        } else if (e.key === "ArrowLeft") {
          position -= 10;
          mario.style.left = `${position}px`;
        }
      });
    </script>
  </body>
</html>

Wow! Look at how our game has transformed with just a bit of CSS magic. We've taken our plain HTML structure and turned it into a colorful, nostalgic Super Mario Bros. scene. Let's break down what we've accomplished:

We've set up a game container that fills the entire screen and has a blue sky background.
We've added a custom retro font to give our game that authentic 8-bit look.
We've created a HUD (Heads-Up Display) at the top of the screen to show game stats.
We've positioned Mario, a Goomba enemy, question blocks, hills, and clouds in our scene.
We've added a ground texture at the bottom of the screen for Mario to walk on.
We've even included the iconic Super Mario Bros. title and copyright notice!

Conclusion

CSS is a powerful tool that allows us to bring our HTML to life. We've only scratched the surface of what's possible with CSS, but you can already see how it transforms a basic structure into something that looks like a real game.

Additional Resources

For further reading and to deepen your understanding of CSS, check out these resources:

In our next lesson, we'll dive into JavaScript and start adding some interactivity to our game. We'll make Mario move, add collision detection, and start turning this static scene into a playable game!

Remember, becoming a great game developer (or any kind of developer) takes practice. Don't be afraid to experiment with the CSS we've learned today. Try changing colors, moving elements around, or even adding your own elements to the scene. The more you play and experiment, the better you'll understand how CSS works.

1.3 CSS Basics: Adding Style to Mario's World

What is CSS and Why Do We Need It?​

How to Use CSS​

CSS Syntax​

Adding Custom Fonts​

Styling the Game Container​

Positioning Elements​

Creating the Ground​

Adding Decorative Elements​

Creating the Game HUD (Heads-Up Display)​

Complete Example​

Conclusion​

Additional Resources​